<template>
	<view class="content bg-light" style="height: 100vh;">
		<tabsTop tabName="在线客服"></tabsTop>
		<!-- 顶部小康龙江 -->
		<view class="flex px-3 py-2 justify-between" @click="indexClick()">
			<view class="flex align-center">
				<view class="rounded-circle overflow-hidden" style="width: 50rpx;height: 50rpx;">
					<image :src="Domain_ICON+'/sponsor.jpg'" mode="" class="img"></image>
				</view>
				<view class="flex align-center ml-1">
					合美供销云平台
					<uni-icons class="ml-1" type="right" color="#eee" size="20" style="padding-top: 5rpx;"></uni-icons>
				</view>
			</view>
			<view class="right" style="width: 50rpx; height: 50rpx;">
				<image :src="Domain_ICON+'/msg.png'" mode="" class="img"></image>
			</view>
		</view>
		<!-- 聊天内容 -->
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">
			<view class="px-3 bg-light pb-3">
				<!-- 聊天主体 -->
				<view id="msglistview " class="chat-body">
					<!-- 聊天记录 -->
					<view v-for="(item,index) in msgList" :key="index" class="mt-3">
						<!-- 自己发的消息 -->
						<view class="item self" v-if="item.userId==2">
							<!-- 文字内容 -->
							<view class="content right">
								{{item.userContent}}
							</view>
							<!-- 头像 -->
							<view class="avatar">
							</view>
						</view>
						<!-- 机器人发的消息 -->
						<view class="item Ai" v-if="item.userId==1">
							<!-- 头像 -->
							<view class="avatar">
							</view>
							<!-- 文字内容 -->
							<view class="content left">
								{{item.userContent}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- <view class=" flex bg-light position-fixed w-100" style="bottom:0;height: 150rpx;">
			 -->
		<view class="send-msg align-center justify-center">
			<!-- <view class="flex">
				<view class="rounded-circle" style="width: 130rpx;border:1px solid #eee;">
					订单查询
				</view>
				<view class="">
					猜你喜欢
				</view>
			</view> -->
			<view class=" flex align-center bot">
				<view class="uni-textarea">
					<textarea v-model.lazy="chatMsg" fixed="true" maxlength="-1" :show-confirm-bar="false"
						auto-height></textarea>
				</view>
				<!-- <button @click="handleSend(1)" class="send-btn">l发送</button> -->
				<button @click="handleSend(2)" class="send-btn">r发送</button>
			</view>

		</view>

		<!-- </view> -->
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import WebSocketIO from "@/static/js/WebSocket.js"
	export default {
		components: { //轮播图组件
			tabsTop,
			tabsBottom,
		},
		data() {
			return {
				websocket: null, //websocket配置
				busId: "WeChat;custom;" + app.globalData.Open_ID + ";" + app.globalData.Enterprise_Info_SerialNumber, //用户ID
				scrollTop: 9999,
				scrollToView: "", //
				Domain_ICON:app.globalData.Domain_ICON,
				userId: '',
				//发送的消息
				chatMsg: "",
				msgList: [{
						id: 0,
						recordId: 0,
						titleId: 0,
						userContent: "您好,欢迎光临本店,有什么能帮您的吗",
						userId: 1
					},
					{
						id: 1,
						recordId: 0,
						titleId: 0,
						userContent: "你好呀我想问你一件事",
						userId: 2
					},
					{
						id: 2,
						recordId: 0,
						titleId: 0,
						userContent: "你好呀我想问你一件事",
						userId: 2
					},

				]
			}
		},
		onLoad() {
			//启动websocket
			this.websocket = new WebSocketIO(this.busId, this.$websocketUrl, 10000)
			this.websocket.connectSocketInit();
			
			//监听收到的数据
			uni.$on("socketMsg", (res) => {
				console.log(res);   // 如果收到数据关闭webscockt
				
			})

		},
		methods: {
			indexClick() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			upper() {

			},
			lower() {

			},
			scroll() {

			},
			handleSend(userId) {
				//如果消息不为空
				if (this.chatMsg) {
					let obj = {
						id: 0,
						botContent: "",
						recordId: 0,
						titleId: 0,
						userContent: this.chatMsg,
						userId: 0,
						type: 0
					}
					obj.userId = userId;
					obj.id = this.msgList.length;
					this.msgList.push(obj);
					this.chatMsg = '';
					this.scrollToView = '',
						this.$nextTick(function() {
							// this.scrollToView = 'msgList' + this.msgList[this.msgList.length - 1].id;
							this.scrollTop = this.scrollTop - 1;
						})
					this.websocket.send(obj)
				} else {
					uni.showToast({
						title: '不能发送空白消息',
						icon: "error"
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	$chatContentbgc: #C2DCFF;
	$sendBtnbgc: #4F7DF5;

	.scroll-Y {
		height: 910rpx;
	}

	.chat-body {
		display: flex;
		flex-direction: column;
		padding-top: 23rpx;
		// background-color:skyblue;

		.self {
			justify-content: flex-end;
		}

		.item {
			display: flex;
			// background-color: greenyellow;

			.right {
				background-color: $chatContentbgc;
			}

			.left {
				background-color: #FFFFFF;
			}

			// 聊天消息的三角形
			.right::after {
				position: absolute;
				display: inline-block;
				content: '';
				width: 0;
				height: 0;
				left: 100%;
				top: 10px;
				border: 12rpx solid transparent;
				border-left: 12rpx solid $chatContentbgc;
			}

			.left::after {
				position: absolute;
				display: inline-block;
				content: '';
				width: 0;
				height: 0;
				top: 10px;
				right: 100%;
				border: 12rpx solid transparent;
				border-right: 12rpx solid #FFFFFF;
			}

			.content {
				position: relative;
				max-width: 486rpx;
				border-radius: 8rpx;
				word-wrap: break-word;
				padding: 24rpx 24rpx;
				margin: 0 24rpx;
				border-radius: 5px;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 42rpx;
			}

			.avatar {
				display: flex;
				justify-content: center;
				width: 78rpx;
				height: 78rpx;
				background: $sendBtnbgc;
				border-radius: 100rpx;
				overflow: hidden;

				image {
					align-self: center;
				}

			}
		}
	}

	// 发送消息
	.send-msg {
		display: flex;
		flex-direction: column;

		padding: 16rpx 10rpx;
		width: 100%;
		min-height: 177rpx;
		position: fixed;
		bottom: 0;
		background: #EDEDED;
	}

	.uni-textarea {
		textarea {
			width: 470rpx;
			min-height: 75rpx;
			max-height: 150rpx;
			background: #fff;
			border-radius: 8rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			color: #000;
			line-height: 43rpx;
			padding: 5rpx 8rpx;
		}
	}

	.send-btn {
		display: flex;
		align-items: center;
		justify-content: center;

		margin-left: 15rpx;
		width: 128rpx;
		height: 75rpx;
		background: $sendBtnbgc;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 28rpx;
	}
	.bot{
		position: fixed;
		bottom: 20rpx;
	}
</style>